<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>分组柱状图</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<h1 align="center">同城榜内容</h1>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script>
  var data = [{'name': '北京生活', 'type': '讨论', 'value': 483.6000},
             {'name': '北京生活', 'type': '阅读', 'value': 695000.0000},
             {'name': '北京美食', 'type': '讨论', 'value': 313.9000},
             {'name': '北京美食', 'type': '阅读', 'value': 433000.0000},
             {'name': '北京领养', 'type': '讨论', 'value': 133.4000},
             {'name': '北京领养', 'type': '阅读', 'value': 269000.0000},
             {'name': '北京曝光', 'type': '讨论', 'value': 84.7000},
             {'name': '北京曝光', 'type': '阅读', 'value': 233000.0000},
             {'name': '北京爆料', 'type': '讨论', 'value': 133.1000},
             {'name': '北京爆料', 'type': '阅读', 'value': 207000.0000},
             {'name': '北京国际电影节', 'type': '讨论', 'value': 151.3000},
             {'name': '北京国际电影节', 'type': '阅读', 'value': 149000.0000},
             {'name': '北京国安', 'type': '讨论', 'value': 28.7000},
             {'name': '北京国安', 'type': '阅读', 'value': 127000.0000},
             {'name': '北京约拍', 'type': '讨论', 'value': 65.8000},
             {'name': '北京约拍', 'type': '阅读', 'value': 61000.0000},
             {'name': '北京旅行', 'type': '讨论', 'value': 38.8000},
             {'name': '北京旅行', 'type': '阅读', 'value': 55000.0000},
             {'name': '北京实习', 'type': '讨论', 'value': 7.0000},
             {'name': '北京实习', 'type': '阅读', 'value': 43000.0000},
             {'name': '小每天的北京实习', 'type': '讨论', 'value': 2.9000},
             {'name': '小每天的北京实习', 'type': '阅读', 'value': 36000.0000},
             {'name': '美丽北京', 'type': '讨论', 'value': 14.6000},
             {'name': '美丽北京', 'type': '阅读', 'value': 32000.0000},
             {'name': '北京招聘', 'type': '讨论', 'value': 18.5000},
             {'name': '北京招聘', 'type': '阅读', 'value': 32000.0000},
             {'name': '北京大学生电影节', 'type': '讨论', 'value': 159.4000},
             {'name': '北京大学生电影节', 'type': '阅读', 'value': 27000.0000},
             {'name': '北京电影学院', 'type': '讨论', 'value': 20.1000},
             {'name': '北京电影学院', 'type': '阅读', 'value': 25000.0000}];
  var chart = new G2.Chart({
    container: 'mountNode',
    forceFit: true,
    height: window.innerHeight-100
  });
  chart.source(data);
  chart.interval().position('name*value').color('type').adjust([{
    type: 'dodge',
    marginRatio: 1 / 32
}]);
  chart.render();
</script>
</body>
</html>

